<script setup lang="ts">
import {reactive, onMounted, nextTick, ref} from 'vue';
import {
  AccDeleteUserList,
  AccPostUserList, AccUserList,
  deleteBannerList,
  deleteTagList,
  getTagList, getUserList,
  getWashOrderList,
  postBannerList,
  postTagList,
  postWashOrderList
} from '/@/api/api'
import {ElMessage} from 'element-plus';
const avueFormRes = ref()
const data = reactive({
  title:'Add',
  dialogShow: false,
  tabIndex: 0,
  dataList: [],
  page: {
    total: 10,
    currentPage: 1,
    pageSize: 10,
  },
  option: {
    searchLabelWidth: 50,
    addBtn: false,
    printBtn: false,
    excelBtn: false,
    // searchSpan: 5,
    searchMenuSpan: 4,
    border: true,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    align: 'center',
    column: [
      {
        label: 'Start time',
        prop: 'createTime',
      },
      {
        label: 'Name',
        prop: 'firstName',
      },
      {
        label: 'surname',
        prop: 'lastName',
      },
      {
        label: 'User phone',
        prop: 'userPhone',
      },
      {
        label: 'Order code',
        prop: 'userCode',
      },
      {
        label: 'Continent',
        prop: 'continent',
      },
      {
        label: 'UserCity',
        prop: 'userCity',
      },
      {
        label: 'UserApt',
        prop: 'userApt',
      },
      {
        label: 'User address',
        prop: 'userAddress',
      },
    ]
  },
  optionForm: {
    submitText:'Submit',
    emptyText	:'Empty',
    column: [
      {
        label: 'phone',
        span: 24,
        prop: 'userPhone',
        type: 'input',
        rules: [
          {
            required: true,
            message: "Please enter your mobile phone number",
            trigger: "blur"
          }
        ]
      },
      {
        label: 'last Name',
        span: 24,
        prop: 'lastName',
        type: 'input',
        labelWidth:120,
        rules: [
          {
            required: true,
            message: "Please enter a name for the label",
            trigger: "blur"
          }
        ]
      },
      {
        label: 'first Name',
        span: 24,
        prop: 'firstName',
        type: 'input',
        labelWidth:120,
        rules: [
          {
            required: true,
            message: "Please enter a name for the label",
            trigger: "blur"
          }
        ]
      },
      {
        label: 'User address',
        span: 24,
        prop: 'userAddress',
        type: 'input',
        labelWidth:120,
        rules: [
          {
            required: true,
            message: "Please enter an address",
            trigger: "blur"
          }
        ]
      },
      {
        label: 'User apt',
        span: 24,
        prop: 'userApt',
        type: 'input',
        labelWidth:120,
        rules: [
          {
            required: true,
            message: "Please enter an address",
            trigger: "blur"
          }
        ]
      },
      {
        label: 'User address',
        span: 24,
        prop: 'userAddress',
        type: 'input',
        labelWidth:120,
        rules: [
          {
            required: true,
            message: "Please enter an userAddress",
            trigger: "blur"
          }
        ]
      },
      {
        label: 'continent',
        span: 24,
        prop: 'userAddress',
        type: 'input',
        labelWidth:120,
        rules: [
          {
            required: true,
            message: "Please enter an continent",
            trigger: "blur"
          }
        ]
      },
      {
        label: 'Zip code',
        span: 24,
        prop: 'zipCode',
        type: 'input',
        labelWidth:120,
        rules: [
          {
            required: true,
            message: "Please enter an zipCode",
            trigger: "blur"
          }
        ]
      },
    ]
  },
  form: {},
  curriculumForm:{}
})

onMounted(() => {

})
const bannerList = () => {
  let page = {
    pageIndex: data.page.currentPage,
    pageSize: data.page.pageSize
  }
  AccUserList(page).then((res: any) => {
    console.log(res)
    if (res.code === 200) {
      data.dataList = res.data.list
      data.page.total = res.data.total
    }

  })
}

const onLoad = (e:any) => {
  console.log(e)
  data.page.currentPage = e.currentPage
  data.page.pageSize = e.pageSize
  bannerList()
}
const refreshChange = () => {
  bannerList()
}
const Complete = (row:any) => {
  postWashOrderList({dryOrderId:row.dryOrderId}).then((res:any)=>{
    if(res.code === 200){
      ElMessage({
        showClose: true,
        message: 'Operation Success',
        type: 'success',
      })
    }
    bannerList()
  })
}
const addCarousel = () => {
  // handleReset()
  data.curriculumForm = {}
  data.title = ''
  data.dialogShow = true
  nextTick(()=>{
    avueFormRes.value.resetForm()
  })
}
const Edit = (row:any) => {
  data.curriculumForm = row
  data.form = row
  data.dialogShow = true
}
const Delete = (row:any) => {
  AccDeleteUserList({ids:[row.userId]}).then((res: any) => {
    bannerList()
    if (res.code === 200) {
      ElMessage({
        showClose: true,
        message: 'The deletion is successful',
        type: 'success',
      })
    }
  })
}
const handleSubmit = (form: object, done: any) => {
  AccPostUserList(data.form).then((res: any) => {
    if (res.code === 200) {
      ElMessage({
        showClose: true,
        message: 'The addition was successful',
        type: 'success',
      })
    }
    data.dialogShow = false
    bannerList()
    done()

  })
}
const handleReset = () => {

}
</script>

<template>
  <div class="layout-pd">
    <div class="carousel-box">
      <avue-crud v-model:page="data.page" :data="data.dataList" :option="data.option" @on-load="onLoad" @refresh-change="refreshChange">
        <template #menu-left="{}">
          <el-button type="success" @click="addCarousel">New</el-button>
        </template>
        <template #menu="{row}">
          <el-button text type="primary" @click="Edit(row)">Edit</el-button>
          <el-button text type="primary" @click="Delete(row)">Delete</el-button>
        </template>
      </avue-crud>
    </div>
    <el-dialog v-model="data.dialogShow" :title="data.title" width="50%">
      <avue-form ref="avueFormRes" :option="data.optionForm" v-model="data.form" @submit="handleSubmit"  @reset-change="handleReset"></avue-form>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.carousel-box {
  width: 100%;
  box-sizing: border-box;
  background: var(--el-color-white);
  padding: 20px;
}

.item-img {
  width: 100%;

  img {
    width: 50%;
  }
}

::v-deep .avue-form__row {
  margin-bottom: 20px;
}
::v-deep .el-select {
  width: 100% !important;
}
</style>